Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
tsparticles-particles.js
Advanced tools
Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.
tsParticles particles.js compatibility library.
The CDN/Vanilla version JS has two different files:
initPjs
function to load the tsParticles/particles.js compatibilityIncluding the tsparticles.pjs.bundle.min.js
file will work exactly like v1
, you can start using the tsParticles
,
the particlesJS
instance, or the Particles
object in the same way.
This installation requires more work since all dependencies must be included in the page. Some lines above are all specified in the Included Packages section.
Once the scripts are loaded you can set up tsParticles
or particlesJS
like this:
const { particlesJS } = initPjs(tsParticles); // not needed if using the bundle script, required for any other installation
particlesJS("tsparticles", {
/* options */
});
// or
tsParticles.load({
id: "tsparticles",
options: {
/* options */
},
});
Here you can use ParticlesJS or tsParticles options, they will work both fine.
const { Particles } = initPjs(tsParticles); // not needed if using the bundle script, required for any other installation
Particles.init({
/* options */
});
Option | Type | Default | Description |
---|---|---|---|
selector | string | - | Required: The CSS selector of your canvas element |
maxParticles | integer | 100 | Optional: Maximum amount of particles |
sizeVariations | integer | 3 | Optional: Amount of size variations |
speed | integer | 0.5 | Optional: Movement speed of the particles |
color | string or string[] | #000000 | Optional: Color(s) of the particles and connecting lines |
minDistance | integer | 120 | Optional: Distance in px for connecting lines |
connectParticles | boolean | false | Optional: true /false if connecting lines should be drawn or not |
responsive | array | null | Optional: Array of objects containing breakpoints and options |
Option | Type | Default | Description |
---|---|---|---|
breakpoint | integer | - | Required: Breakpoint in px |
options | object | - | Required: Options object, that overrides default values |
Method | Description |
---|---|
pauseAnimation | Pauses/stops the particle animation |
resumeAnimation | Continues the particle animation |
destroy | Destroys the plugin |
2.12.0 (2023-08-03)
FAQs
Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.
The npm package tsparticles-particles.js receives a total of 16,278 weekly downloads. As such, tsparticles-particles.js popularity was classified as popular.
We found that tsparticles-particles.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.